<template>
  <nav id="navigation" class="navbar navbar-default">
    <div class="container">
      <a class="navbar-brand" href="#"> <i :class="'glyphicon glyphicon-'+wikiIcon"></i> {{ wikiName }} </a>
      <ul class="nav navbar-nav">
        <li v-for="navItem in navList" :id="navItem.id" @mouseover="active(navItem.id,$event)" @mouseleave="inActive()"
            :class="{active:isActive(navItem.id)}">
          <router-link v-if="!hasSubMenu(navItem)" :to="'page-'+navItem.id">{{navItem.name}}</router-link>
          <a v-else :id='navItem.id' href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{navItem.name}}<b
            class="caret"></b></a>
          <ul v-if="hasSubMenu(navItem)" class="dropdown-menu">
            <li v-for="subMenuItem in navItem.subMenu">
              <router-link :to="'page-'+subMenuItem.id">{{subMenuItem.name}}</router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
  export default {
    name: 'nav-bar',
    data() {
      return {
        wikiName: '我的Wiki',
        wikiIcon: 'wrench',
        activeNav: '',
        navList: [{
          id: 'home',
          name: '首页'
        }, {
          id: 'menu1',
          name: '菜单1',
          subMenu: [{
            id: 'menu1-submenu1',
            name: '子菜单1-1'
          }, {
            id: 'menu1-submenu2',
            name: '子菜单1-2'
          }, {
            id: 'menu1-submenu3',
            name: '子菜单1-3'
          }]
        }, {
          id: 'menu2',
          name: '菜单2',
          subMenu: [{
            id: 'menu2-submenu1',
            name: '子菜单2-1'
          }, {
            id: 'menu2-submenu2',
            name: '子菜单2-2'
          }, {
            id: 'menu2-submenu3',
            name: '子菜单2-3'
          }]
        }, {
          id: 'menu3',
          name: '菜单3'
        }]
      }
    },
    methods: {
      hasSubMenu(navItem) {
        if (navItem.subMenu != undefined && navItem.subMenu != null) {
          if (navItem.subMenu.length > 0) {
            return true;
          }
        }
        return false;
      },
      active(navId, event) {
        this.activeNav = navId;
      },
      inActive() {
        this.activeNav = "";
      },
      isActive(navId) {
        return this.activeNav == navId;
      }
    }
  }
</script>
